<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能医疗问答系统 - AI健康助手</title>
    <link rel="stylesheet" href="/static/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <meta name="description" content="基于AI的医疗问答系统，提供专业的健康咨询和医疗建议">
</head>
<body>
    <!-- 加载动画 -->
    <div id="loading-overlay" class="loading-overlay">
        <div class="loading-spinner">
            <i class="fas fa-heartbeat"></i>
            <p>正在连接AI健康助手...</p>
        </div>
    </div>

    <!-- 头部导航 -->
    <header class="header">
        <div class="header-content">
            <div class="logo">
                <i class="fas fa-heartbeat"></i>
                <h1>AI健康助手</h1>
            </div>
            <div class="header-controls">
                <button id="theme-toggle" class="control-btn" title="切换主题">
                    <i class="fas fa-moon"></i>
                </button>
                <button id="clear-chat" class="control-btn" title="清空对话">
                    <i class="fas fa-trash"></i>
                </button>
                <button id="settings-btn" class="control-btn" title="设置">
                    <i class="fas fa-cog"></i>
                </button>
            </div>
        </div>
    </header>

    <main class="main-container">
        <!-- 侧边栏 -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <h3>功能菜单</h3>
                <button id="sidebar-toggle" class="sidebar-toggle">
                    <i class="fas fa-chevron-left"></i>
                </button>
            </div>
            
            <nav class="sidebar-nav">
                <div class="nav-section">
                    <h4>快速功能</h4>
                    <button class="nav-btn" data-action="symptoms">
                        <i class="fas fa-stethoscope"></i>
                        症状查询
                    </button>
                    <button class="nav-btn" data-action="diseases">
                        <i class="fas fa-file-medical"></i>
                        疾病百科
                    </button>
                    <button class="nav-btn" data-action="drugs">
                        <i class="fas fa-pills"></i>
                        药物信息
                    </button>
                    <button class="nav-btn" data-action="prevention">
                        <i class="fas fa-shield-alt"></i>
                        预防建议
                    </button>
                </div>
                
                <div class="nav-section">
                    <h4>系统状态</h4>
                    <div class="status-item">
                        <span>AI模型状态</span>
                        <span id="model-status" class="status-indicator active">在线</span>
                    </div>
                    <div class="status-item">
                        <span>响应时间</span>
                        <span id="response-time">--ms</span>
                    </div>
                    <div class="status-item">
                        <span>今日咨询</span>
                        <span id="daily-queries">0</span>
                    </div>
                </div>
            </nav>
        </aside>

        <!-- 主要内容区域 -->
        <div class="content">
            <!-- 欢迎页面 -->
            <div id="welcome-screen" class="welcome-screen">
                <div class="welcome-content">
                    <i class="fas fa-user-md welcome-icon"></i>
                    <h2>欢迎使用AI健康助手</h2>
                    <p>我是您的专属医疗咨询AI助手，可以为您提供：</p>
                    <div class="feature-grid">
                        <div class="feature-card">
                            <i class="fas fa-comments"></i>
                            <h4>智能问答</h4>
                            <p>回答各种医疗健康问题</p>
                        </div>
                        <div class="feature-card">
                            <i class="fas fa-search"></i>
                            <h4>症状分析</h4>
                            <p>根据症状提供初步建议</p>
                        </div>
                        <div class="feature-card">
                            <i class="fas fa-hospital"></i>
                            <h4>科室推荐</h4>
                            <p>推荐合适的就诊科室</p>
                        </div>
                        <div class="feature-card">
                            <i class="fas fa-heart"></i>
                            <h4>健康建议</h4>
                            <p>提供日常健康指导</p>
                        </div>
                    </div>
                    <div class="quick-start">
                        <h3>快速开始</h3>
                        <div class="quick-questions">
                            <button class="quick-question" data-question="我最近总是头痛，可能是什么原因？">头痛原因</button>
                            <button class="quick-question" data-question="感冒发烧应该吃什么药？">感冒用药</button>
                            <button class="quick-question" data-question="如何预防高血压？">高血压预防</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 聊天区域 -->
            <div class="chat-container" id="chat-container" style="display: none;">
                <div class="chat-header">
                    <div class="chat-info">
                        <i class="fas fa-robot"></i>
                        <span>AI健康助手正在为您服务</span>
                    </div>
                    <div class="chat-controls">
                        <button id="export-chat" class="chat-control-btn" title="导出对话">
                            <i class="fas fa-download"></i>
                        </button>
                    </div>
                </div>
                
                <div class="chat-messages" id="chat-messages">
                    <div class="message bot-message">
                        <div class="message-avatar">
                            <i class="fas fa-robot"></i>
                        </div>
                        <div class="message-content">
                            <div class="message-header">
                                <span class="message-author">AI健康助手</span>
                                <span class="message-time">刚刚</span>
                            </div>
                            <div class="message-text">
                                您好！我是AI健康助手，请问有什么可以帮您的？
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="chat-input-container">
                    <div class="input-tools">
                        <button class="tool-btn" id="voice-input" title="语音输入">
                            <i class="fas fa-microphone"></i>
                        </button>
                        <button class="tool-btn" id="image-upload" title="上传图片">
                            <i class="fas fa-image"></i>
                        </button>
                    </div>
                    
                    <div class="chat-input-area">
                        <textarea 
                            id="question-input" 
                            placeholder="请输入您的医疗问题，或点击右侧快捷问题..."
                            rows="1"
                        ></textarea>
                        <button id="send-btn" class="send-btn" disabled>
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 结果展示区域 -->
            <div class="results-container" id="results-container" style="display: none;">
                <div class="results-header">
                    <h3>查询结果</h3>
                    <button class="back-to-chat" id="back-to-chat">
                        <i class="fas fa-arrow-left"></i>
                        返回对话
                    </button>
                </div>
                
                <div class="results-content" id="results-content">
                    <!-- 动态加载结果 -->
                </div>
            </div>
        </div>
    </main>

    <!-- 模态框 -->
    <div id="modal-overlay" class="modal-overlay" style="display: none;">
        <div class="modal">
            <div class="modal-header">
                <h3 id="modal-title">设置</h3>
                <button class="modal-close" id="modal-close">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body" id="modal-body">
                <!-- 动态内容 -->
            </div>
        </div>
    </div>

    <!-- 反馈面板 -->
    <div id="feedback-panel" class="feedback-panel" style="display: none;">
        <div class="feedback-header">
            <h4>评价回答质量</h4>
            <button class="close-feedback" id="close-feedback">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="feedback-content">
            <div class="rating-section">
                <p>这个回答对您有帮助吗？</p>
                <div class="star-rating" id="star-rating">
                    <i class="far fa-star" data-rating="1"></i>
                    <i class="far fa-star" data-rating="2"></i>
                    <i class="far fa-star" data-rating="3"></i>
                    <i class="far fa-star" data-rating="4"></i>
                    <i class="far fa-star" data-rating="5"></i>
                </div>
            </div>
            
            <div class="feedback-text-section">
                <textarea 
                    id="feedback-text" 
                    placeholder="请详细描述您的意见或建议..."
                    rows="3"
                ></textarea>
            </div>
            
            <div class="feedback-actions">
                <button id="submit-feedback" class="submit-feedback-btn">提交反馈</button>
                <button id="skip-feedback" class="skip-feedback-btn">跳过</button>
            </div>
        </div>
    </div>

    <!-- 语音输入面板 -->
    <div id="voice-panel" class="voice-panel" style="display: none;">
        <div class="voice-content">
            <i class="fas fa-microphone voice-icon"></i>
            <p class="voice-text">正在聆听...</p>
            <button id="stop-voice" class="stop-voice-btn">停止</button>
        </div>
    </div>

    <!-- 通知系统 -->
    <div id="notification-container" class="notification-container"></div>

    <!-- JavaScript -->
    <script src="/static/script.js"></script>
    <script>
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🚀 AI健康助手已启动');
            
            // 显示加载完成提示
            setTimeout(() => {
                const loadingOverlay = document.getElementById('loading-overlay');
                if (loadingOverlay) {
                    loadingOverlay.style.opacity = '0';
                    setTimeout(() => {
                        loadingOverlay.style.display = 'none';
                    }, 300);
                }
            }, 1500);
        });
    </script>
</body>
</html>